<template>
  <div>
    <page-header> </page-header>
    <pageMain padding="0px" background="transparent">
      <main class="main" v-if="false">
        <div class="form">
          <pageHeader
            padding="12px 15px"
            background="#efe7e7"
            title="基本配置"
          ></pageHeader>

          <div class="form-box">
            <el-form
              ref="form"
              :model="addMenuForm"
              label-width="80px"
              label-position="top"
            >
              <el-form-item label="菜单名称">
                <el-input v-model="addMenuForm.meta.title"></el-input>
              </el-form-item>
              <el-form-item label="路径名称 - 仅支持英文">
                <el-input v-model="addMenuForm.path">
                  <template slot="prepend">/</template>
                </el-input>
              </el-form-item>

              <el-form-item label="组件路径" v-if="this.pageParams.pid">
                <el-input v-model="addMenuForm.path">
                  <template slot="prepend">/src/pages/</template>
                  <template slot="append">.vue</template>
                </el-input>
              </el-form-item>
              <el-form-item label="菜单图标">
                <icon popover></icon>
              </el-form-item>

              <el-form-item label="激活图标">
                <icon popover></icon>
              </el-form-item>
            </el-form>
          </div>
          <pageHeader
            padding="12px 15px"
            background="#efe7e7"
            title="显示配置"
          ></pageHeader>
          <div class="form-box">
            <el-form
              ref="form"
              :model="addMenuForm"
              label-width="140px"
              label-position="top"
            >
              <el-form-item label="侧边栏中显示">
                <el-switch
                  v-model="value1"
                  active-text="隐藏"
                  inactive-text="显示"
                >
                </el-switch>
              </el-form-item>
              <el-form-item label="面包屑中显示">
                <el-switch
                  v-model="value1"
                  active-text="隐藏"
                  inactive-text="显示"
                >
                </el-switch>
              </el-form-item>

              <el-form-item label="页面缓存">
                <el-switch
                  v-model="value1"
                  active-text="关闭"
                  inactive-text="开启"
                >
                </el-switch>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div class="able">
          <pageHeader
            padding="12px 15px"
            background="#efe7e7"
            title="拓展配置"
          ></pageHeader>

          <el-table :data="tableData" style="width: 100%" border>
            <el-table-column prop="date" label="日期" width="45">
              <template slot="header">
                <el-button
                  type="primary"
                  icon="el-icon-plus"
                  circle
                  size="mini"
                ></el-button>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="标识" width="180">
            </el-table-column>
            <el-table-column prop="address" label="地址"> </el-table-column>
          </el-table>
        </div>
      </main>

      <chunkTitle title="基本信息" border></chunkTitle>


      <div class="chunk">
        <div class="base-form">
          <el-form
            ref="form"
            :model="addMenuForm"
            label-width="160px"
            label-position="left"
            size="small"
          >
            <el-form-item label="菜单名称" size="small">
              <el-input v-model="addMenuForm.title" size="small"></el-input>
            </el-form-item>

            <el-form-item label="英文名称">
              <el-input v-model="addMenuForm.name" size="small"></el-input>
            </el-form-item>

            <el-form-item label="访问路径">
              <el-input v-model="addMenuForm.path" size="small">
                <template slot="prepend">/</template>
              </el-input>
            </el-form-item>
            <el-form-item label="文件地址">
              <el-input v-model="addMenuForm.filePath" size="small">
                <template slot="prepend">/src/pages/</template>
                <template slot="append">.vue</template>
              </el-input>
            </el-form-item>
            <el-form-item label="菜单图标">
              <icon
                popover
                @select="selectNormalIcon"
                :icon="addMenuForm.icon_nomal"
              ></icon>
            </el-form-item>

            <el-form-item label="激活图标">
              <icon
                popover
                @select="selectActiveIcon"
                :icon="addMenuForm.icon_active"
              ></icon>
            </el-form-item>
            <el-form-item label="侧边栏中显示">
              <el-switch
                v-model="addMenuForm.navigator_show"
                active-text="隐藏"
                inactive-text="显示"
              >
              </el-switch>
            </el-form-item>
            <el-form-item label="面包屑中显示">
              <el-switch
                v-model="addMenuForm.breadcrumbs_show"
                active-text="隐藏"
                inactive-text="显示"
              >
              </el-switch>
            </el-form-item>

            <el-form-item label="页面缓存">
              <el-switch
                v-model="addMenuForm.keep_alive"
                active-text="关闭"
                inactive-text="开启"
              >
              </el-switch>
            </el-form-item>
            <el-form-item label="重定向">
              <el-switch
                v-model="addMenuForm.redirect_state"
                active-text="关闭"
                inactive-text="开启"
              >
              </el-switch>
            </el-form-item>

            <el-form-item label="重定向跳转方式">
              <el-select
                v-model="addMenuForm.redirect_type"
                placeholder="请选择重定向方式"
              >
                <el-option label="路由重定向" :value="1"></el-option>
                <el-option label="网址重定向" :value="0"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="重定向跳转菜单/地址">
              <el-input
                v-model="addMenuForm.redirect_url"
                size="small"
                placeholder="请输入重定向地址"
              ></el-input>
            </el-form-item>

            <el-form-item label="重定向跳转方式">
              <el-select
                v-model="addMenuForm.redirect_target"
                placeholder="请选择重定向方式"
              >
                <el-option label="外跳转" :value="1"></el-option>
                <el-option label="内跳转" :value="0"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="徽标">
              <el-input
                v-model="addMenuForm.buoy"
                size="small"
                placeholder="请输入徽标内容"
              ></el-input>
            </el-form-item>

            <el-form-item label="默认展开">
              <el-switch
                v-model="addMenuForm.defaultChildrenDevelop"
                active-text="关闭"
                inactive-text="开启"
              >
              </el-switch>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <chunkTitle title="角色权限配置" description="配置该页面允许访问的角色">
        <div slot="right">
          <el-button
            size="mini"
            type="primary"
            round
            icon="el-icon-plus"
            @click="clickAddRole"
            >添加角色</el-button
          >
          <el-button
            size="mini"
            type="warning"
            round
            icon="el-icon-magic-stick"
            @click="clickAddAllRole"
            >装载全部角色</el-button
          >
        </div>
      </chunkTitle>

      <div class="chunk overall-flex">
        <el-table :data="authData" style="width: 100%" :size="formLabelSize">
          <el-table-column prop="date" label="角色"> </el-table-column>
          <el-table-column label="权限">
            <template>
              <span>可访问</span>
            </template>
          </el-table-column>
          <el-table-column prop="date" label="操作" width="70px" align="center">
            <template>
              <el-link
                type="danger"
                @click="clickRemoveUser(scope.row, scope.$index)"
                >删除</el-link
              >
            </template>
          </el-table-column>
        </el-table>
      </div>

      <chunkTitle
        title="接口权限配置"
        description="配置该页面可以发起的HTTP接口、websockey接口"
      >
        <div slot="right">
          <el-button size="mini" type="primary" round icon="el-icon-plus"
            >添加接口</el-button
          >
        </div>
      </chunkTitle>

      <div class="chunk overall-flex">
        <el-table :data="authData" style="width: 100%" :size="formLabelSize">
          <el-table-column prop="date" label="接口URL"> </el-table-column>
          <el-table-column prop="date" label="操作" width="70px" align="center">
            <template>
              <el-link
                type="danger"
                @click="clickRemoveUser(scope.row, scope.$index)"
                >删除</el-link
              >
            </template>
          </el-table-column>
        </el-table>
      </div>

      <chunkTitle title="扩展配置"></chunkTitle>
      <div class="chunk">
        <el-empty description="暂无配置项"></el-empty>
      </div>
    </pageMain>

    <page-footer >
      <div
        class="overall-flex overall-align-center overall-justify-center"
      >
        <el-button type="primary" round @click="onSubmit">保存</el-button>
        <el-button type="info" round>取消</el-button>
      </div>
    </page-footer>

    <el-dialog title="提示" :visible.sync="rolesDialogShow" width="60%" center>
      <rolesKList slot="footer"></rolesKList>
    </el-dialog>
  </div>
</template>

<script>
import { mapMutations, mapGetters } from "vuex";
import pageHeader from "~/page-header/page-header.vue";
import pageFooter from "~/page-footer/page-footer.vue";
import pageMain from "~/page-main/page-main.vue";
import icon from "~/icon/icon.vue";
import chunkTitle from "@/components/chunk-title/chunk-title.vue";
import rolesKList from "~/roles-list/roles-list.vue";
export default {
  components: {
    pageHeader,
    pageFooter,
    pageMain,
    icon,
    rolesKList,
    chunkTitle,
  },
  mounted() {
    // let params = this.$route.params;
    // pid : 当如果有pid传入时，表示要为这个id的菜单新增子菜单
    // mode ： 当前页面的模式
    // let { pid, mode } = params;
    // this.pageParams.pid = pid;
    // this.addMenuForm.meta.pid = pid;
    // this.pageParams.mode = mode;
    // let modeArray = [
    //   {
    //     mode: "addMenu",
    //     title: "新增主菜单",
    //     sumbitButtonTitle: "",
    //   },
    //   {
    //     mode: "editMenu",
    //     title: "编辑主菜单",
    //     sumbitButtonTitle: "",
    //   },
    //   {
    //     mode: "addChildMenu",
    //     title: "新增子菜单",
    //     sumbitButtonTitle: "",
    //   },
    //   {
    //     mode: "editChildMenu",
    //     title: "编辑子菜单",
    //     sumbitButtonTitle: "",
    //   },
    //   {
    //     mode: "addChildPage",
    //     title: "新增子页面",
    //     sumbitButtonTitle: "",
    //   },
    //   {
    //     mode: "editChildPage",
    //     title: "编辑子页面",
    //     sumbitButtonTitle: "",
    //   },
    // ];
    // this.pageParams.parentInfo = this.getOriginNavigator.find(
    //   (i) => i.meta.id == pid
    // );
    // this.pageParams.title = modeArray.find((i) => i.mode == mode).title;
    // this.sumbitButtonTitle = modeArray.find(
    //   (i) => i.mode == mode
    // ).sumbitButtonTitle;
    // addMenu 新增主菜单      （无组件路径填写项）
    // editMenu 编辑主菜单     （无组件路径填写项）
    // addChildMenu 新增子菜单 （无组件路径填写项）
    // editChildMenu 编辑子菜单（无组件路径填写项）
    // addChildPage 新增子页面 （有组件路径填写项）
    // editChildPage 编辑子页面（有组件路径填写项）
  },

  data() {
    return {
      rolesDialogShow: false,

      // 表单label宽度
      formLabelWidth: "",
      // 表单所有元素大小
      formLabelSize: "small",

      authData: [{}, {}],

      pageParams: {
        pid: null,
        title: "",
        mode: "",
        parentInfo: {},
      },
      // 提交按钮标题
      sumbitButtonTitle: "",
      // 新增菜单配置
      addMenuForm: {
        title: "", // 菜单中文名称
        name: "", // 菜单英文名称
        path: "", // 路径名称
        component: "", // 文件地址
        icon_nomal: "", // 图标地址
        icon_active: "", // 激活图标地址
        breadcrumbs_show: true, // 侧边栏显示
        navigator_show: true, // 面包屑显示
        keep_alive: false, // 开启缓存
        redirect_state: false, // 重定向
        redirect_target: 0, // 重定向跳转方式（0：内跳转  1：外页）
        redirect_url: "", // 重定向跳转菜单/网页地址
        redirect_type: 1, // 重定向方式（1菜单重定向  0地址重定向）
        buoy: "",
        defaultChildrenDevelop: false, // 默认展开
      },
    };
  },
  computed: {
    ...mapGetters(["getOriginNavigator"], "overall"),
  },
  methods: {
    ...mapMutations(["addMenuBar"], "overall"),
    onSubmit() {
      console.log(this.addMenuForm);

      this.addMenu();
    },
    HttpPushMenu() {
      // this.$axios
      //   .post(api.mork_navigator_data, {
      //     active: "addMenu",
      //     data: data,
      //   })
      //   .then((result) => {
      //     console.log(result);
      //   })
      //   .catch((err) => {
      //     console.log(err);
      //   });
    },
    // 点击添加角色
    clickAddRole() {
      this.rolesDialogShow = true;
    },
    GoBack() {
      this.$router.back();
    },
    // 装载全部角色
    clickAddAllRole() {},

    selectNormalIcon(e) {
      this.addMenuForm.icon_nomal = e.className;
    },
    selectActiveIcon(e) {
      this.addMenuForm.icon_active = e.className;
    },

    // addMenu() {
    //   let { title } = this.addMenuForm.meta;
    //   let list = this.getOriginNavigator;
    //   let ifrepeatName = list
    //     .filter((i) => i.meta.pid == null)
    //     .map((item) => item.meta.title)
    //     .includes(title);
    //   let messageType = "error";
    //   let messageText = "";
    //   if (ifrepeatName) {
    //     messageText = "菜单名称重复";
    //   } else {
    //     messageType = "success";
    //     messageText = "添加菜单成功";
    //     this.addMenuBar({ ...this.addMenuForm });
    //   }
    //   this.$message({
    //     showClose: true,
    //     message: messageText,
    //     type: messageType,
    //   });
    // },
  },
};
</script>

<style lang="scss" scoped>
.chunk {
  background: white;
  margin-bottom: 20px;
  padding: 14px 24px;
}
.base-form {
  width: 400px;
  margin-left: 0px;
}
.form,
.able {
  flex: 1;
}

.form {
}
.form-box {
  padding: 0px 18px;
}

/deep/ .el-form-item {
  margin-bottom: 18px;
}

.footer {
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
